html {
    height: 100%;
  }
  body {
    margin: 0;
    font-size: 28px;
    font-family: Arial, Helvetica, sans-serif;
    color: #000000;
    height: 100%;
    min-width: min-content;
    position: relative;
  }
  
  /*Style a container for the whole content with position relative*/

  /*Style the header*/

  .header {
    text-align: center;
    background-image: url("Images/Background_header.jpg");
    padding: 10px;
    color: white;
  }

  h1.header {
    margin-bottom: 0%;
    background: none;
  }
  img.logo  {
    width:10%;
  }

  img.logo-responsive {
    display: none;
    width:10%;
    float: left;
    margin-top: 12px;
  }
  

  img.PDF  {
  width:5%;
  }

  img.template  {
    width:20%;
    }
  
 /*Style the footer*/

  .footer {
    display: flex;
    flex-direction: row;
    background-color: #7a612b;
    padding: 10px;
    text-align: center;
    color: white;
    position: relative;
    bottom: 0;
  }


  .footer-contact {
    display: flex;
    flex-direction: row;
    background-color: #7a612b;
    padding: 10px;
    text-align: center;
    color: white;
    position: relative;
    bottom: 0;
  }

  .footer-fixed {
    display:flex;
    flex-direction: row;
    background-color: #7a612b;
    padding: 10px;
    text-align: center;
    color: white;
    position: fixed;
    bottom: 0;
    display: none;
  }

  .footer-left {
    flex: 33%;
    text-align: left;
    font-size: small;
    padding-right: 10px;
    padding-left: 10px;
  }

  .footer a {
    color: white;
    font-weight: bold;
    line-height: 1.5rem;
  }

  .footer-contact a {
    color: white;
    font-weight: bold;
    line-height: 1.5rem;
  }

  .footer-fixed a {
    color: white;
    font-weight: bold;
    line-height: 1.5rem;
  }

  /*Style the top navigation bar*/

  #topnav {
    overflow: hidden;
    background-color: #7a612b;
  }
  
  #topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    font-weight: bold;
  }
  
  #topnav a:hover {
    background-color: rgb(255, 255, 255);
    color: black;
  }
  
  #topnav a.active {
    background-color: #ffffff;
    color: rgb(0, 0, 0);
  }

  /* Style the search box inside the navigation bar */
  #topnav .search-container {
    float: right;
  }
  
  #topnav input[type=text] {
    padding: 6px;
    margin-top: 8px;
    font-size: 17px;
    border: none;
  }

#topnav .search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

#topnav .search-container button:hover {
  background: #ccc;
}

/*Style the responsive topnav*/

/* Style the responsive menu */

 /* Dropdown Button */
 .dropbtn {
    background-color: rgb(255, 255, 255);
    color:#7a612b;
    padding: 16px;
    font-size: 17px;
    font-weight: bold;
    border:none;
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.644);
    cursor: pointer;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}
  

  /* Dropdown button on hover & focus */
  .dropbtn:hover, .dropbtn:focus {
    background-color: rgb(255, 255, 255);
    color:#7a612b;
  }
  
  /* The container <div> - needed to position the dropdown content */
  #dropdown {
    position: relative;
    display: none;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    }
  
  /* Dropdown Content (Hidden by Default) */
  .dropdown-content {
    text-align: center;
    display: none;
    position: absolute;
    background-color:#7a612b;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  /* Links inside the dropdown */
  .dropdown-content a {
    color: rgb(255, 255, 255);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: medium;
    font-weight: bold;
  }
  
  /* Change color of dropdown links on hover */
  .dropdown-content a:hover {background-color:#000000}
  
  /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
  .show {display:block;} 

/*Style the flex columns of the main content - not used*/
.flex-container {
    display: flex;
    flex-direction: row;
    font-size: 30px;
    text-align: center;
    height: 100%;
  }
  
  .flex-item-left {
    background-color: #ffffff;
    padding: 10px;
    flex: 15%;
    border-right: thick solid #7a612b;
    height: 100%;
  }
  
  .flex-item-right {
    background-color: rgb(255, 255, 255);
    padding: 10px;
    flex: 85%;
    height: 100%;
  }
  
  /*Style the flex columns of the main content*/

  #flex-container-main {
    display: flex;
    flex-direction: row;
    font-size: 30px;
    min-height: 100%;
  }
  #flex-container-main:after {
    content: "";
    display: table;
    clear: both;
  }
  
  #flex-main-item-left {
    background-color: #ffffff;
    padding: 10px;
    flex: 70%;
    box-shadow: 0 4px 8px 0 rgba(50, 33, 82, 0.2), 0 6px 20px 0 rgba(50, 33, 82, 0.40);
    margin:10px;
  }
  
  #flex-main-item-right {
    background-color: rgb(255, 255, 255);
    padding: 10px;
    flex: 20%;
    border: thin solid #7a612b;
    margin:10px;
    box-shadow: 0 4px 8px 0 rgba(50, 33, 82, 0.2), 0 6px 20px 0 rgba(50, 33, 82, 0.40);
  }

  /* Style the search box inside the Other publications main content */
  #flex-main-item-left .search-container {
    float: left;
  }    

  #flex-main-item-left input[type=text] {
    padding: 6px;
    margin-top: 8px;
    font-size: 17px;
    border: 1px solid;
  }

  #flex-main-item-left .search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: 1px solid;
  cursor: pointer;
  }

 #flex-main-item-left .search-container button:hover {
  background: #ccc;
 }

  /*Style the main container for Issues - extra column*/

  #flex-Issues-left {
    background-color: rgb(255, 255, 255);
    padding: 10px;
    flex: 15%;
    border: thin solid #7a612b;
    margin:10px;
    box-shadow: 0 4px 8px 0 rgba(50, 33, 82, 0.2), 0 6px 20px 0 rgba(50, 33, 82, 0.40);
  }

  #flex-Issues-center {
    background-color: #ffffff;
    padding: 10px;
    flex: 65%;
    box-shadow: 0 4px 8px 0 rgba(50, 33, 82, 0.2), 0 6px 20px 0 rgba(50, 33, 82, 0.40);
    margin:10px;
  }


  
  #flex-Issues-right {
    background-color: rgb(255, 255, 255);
    padding: 10px;
    flex: 20%;
    border: thin solid #7a612b;
    margin:10px;
    box-shadow: 0 4px 8px 0 rgba(50, 33, 82, 0.2), 0 6px 20px 0 rgba(50, 33, 82, 0.40);
  }

    /* Style the search box inside the Issues main content */
    #flex-Issues-center .search-container {
      float: left;
    }    

    #flex-Issues-center input[type=text] {
      padding: 6px;
      margin-top: 8px;
      font-size: 17px;
      border: 1px solid;
    }
  
    #flex-Issues-center .search-container button {
    float: right;
    padding: 6px 10px;
    margin-top: 8px;
    margin-right: 16px;
    background: #ddd;
    font-size: 17px;
    border: 1px solid;
    cursor: pointer;
    }
  
   #flex-Issues-center .search-container button:hover {
    background: #ccc;
   }

   /*Style the images of the issues in Issues*/

   #flex-issues-row {
    display: flex;
    flex-direction: row;
    clear:left;
    padding: 30px;
   }

   #flex-issues-row >div {
   margin: 10px;
   width: 25%;
   align-self:baseline;
  }

  img.issues {
    width: 70%;
    min-height:110px;
    display:block;
  }

  a.issues {
    margin: 0%;
    float: none;
    text-decoration: none;
    color: #7a612b;
    font-size:large;
    font-weight: bold;
  }

  /*not used*/

  h6.no-margin {
    margin: 0%;
    float: none;
  }

  /*Style the link back to the volume in individual page for each article*/
  a.back {
    text-decoration: none;
  }

  /*Style List of authors title*/
  h5.authors {
    padding-top: 20px;
    padding-bottom: 20px;
    margin: 0%;
    float: none;
    clear:both;
  }

   /*Style List of authors alphabetic letter*/
   h5.alphabet {
    padding-top: 10px;
    padding-bottom: 5px;
    text-align: center;
    margin: 0%;
    float: none;
    clear:both;
  }

  /*Style List of authors list*/

  #authors {
    list-style-type: none;
    text-align: left;
    font-size:22px;
    padding-top: 15px;
    margin: 0%;
    color: #7a612b;
  }

  #authors a {
    text-decoration: underline;
    color: #7a612b;
  }

  #browse_title {
    list-style-type: none;
    text-align: left;
    font-size:20px;
    padding-left: 60px;
    padding-bottom: 15px;
    margin: 0%;
  }

  #browse_title a {
    text-decoration: underline;
    color: #7a612b;
  }

  /*Style the text inside the main container - Home page Current Issue*/

  h4.blue {
    color: rgb(53, 38, 9);

  }

  h5.blue {
    color: rgb(53, 38, 9);
    margin-bottom: 0%;
  }

  h5.issues {
    color: rgb(53, 38, 9);
    margin:20px;
    margin-left: 0%;
  }

  p.author-current {
    font-size: large;
    text-align: left;   
    float:none;
    color: rgb(53, 38, 9);
    margin-bottom:0px;
    margin-top:25px;
  }
  
  p.author-current-reviews {
    font-size: large;
    font-weight: normal;
    color: rgb(53, 38, 9);
    text-align: left;   
    margin-top:25px;
    float:none;
  }
  
  a.title-sumar {
    font-size: large; 
    font-weight: bold; 
    color:#7a612b;
    text-align:left;
    line-height: 1.5;
    text-decoration: none;
  }
  
  a.title-main {
    font-size: large; 
    font-weight: bold; 
    color:#7a612b;
    text-align:left;
    line-height: 1.5;
    text-decoration: none;
  }

  a.title-reviews {
    font-size: large; 
    font-weight: bold; 
    color:#7a612b;
    text-align:left;
    line-height: 1.5;
    text-decoration: none;
    float:none;
  }

  a.title-annexes {
    font-size: large; 
    font-weight: normal; 
    color:#7a612b;
    text-align:left;
    line-height: 1.5;
    text-decoration: none;
    float:none;
  }

  p.abstract {
    font-size: large;  
    float:none;
    color: rgb(53, 38, 9);
    margin-bottom:0px;
    margin-top:25px;
    text-align: justify;
  }

  a.browse {
    font-size: large; 
    font-weight: bold; 
    color:#7a612b;
    text-align:left;
    text-decoration:none;
  }

  a.browse-issues_main {
    font-size: medium; 
    font-weight: normal; 
    color:#7a612b;
    text-align:left;
    text-decoration: none;
    display: none;
  }

  p.browse {
    font-size: large; 
    font-weight: bold; 
    color:rgb(53, 38, 9);
    text-align:left;
    text-decoration: none;
    margin: 0%;
  }

  p.browse-issues_main {
    font-size: medium; 
    font-weight: bolder; 
    color:rgb(53, 38, 9);
    text-align:left;
    text-decoration: none;
    margin: 0%;
    padding-top: 20px;
    display: none;
    clear:left;
  }


  p.news {
    font-size: large; 
    font-weight: bold; 
    color:rgb(53, 38, 9);
    text-align:left;
    text-decoration: none;
  }

  p.contact {
    font-size: large; 
    font-weight: bold; 
    color:rgb(53, 38, 9);
    text-align:left;
    text-decoration: none;
  }

  p.contact_regular {
    font-size: large; 
    font-weight:normal; 
    color:rgb(0, 0, 0);
    text-align:left;
    text-decoration: none;
  }

  p.contact_email {
    font-size: large; 
    font-weight:normal; 
    color:darkgreen;
    text-align:left;
    text-decoration: none;
    margin-top:0;
  }

  p.main-content {
    font-size: medium;
    text-align: justify;
  }

  p.footer {
    display: inline-block;
    text-align: justify;
    position: relative;
    padding: 0%;
    margin: 0%;
  }
  p.footer-responsive {
    display: none;
    margin: 0%;
    padding: 0%;
   }

   /*Style the back to top button*/

   #myBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-size: 14px;
    border: none;
    outline: none;
    background-color: rgb(116, 104, 82);
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 4px;
  }
  
  #myBtn:hover {
    background-color: #555;
  }
  
  /* Responsive layout - makes a one column-layout instead of two-column layout */
  @media (max-width: 800px) {
    .flex-container {
      flex-direction: column;
    }
  }

  /* Responsive search -  */
  @media screen and (max-width: 600px) {
    .topnav .search-container {
      float: none;
    }

    .topnav a, .topnav input[type=text], .topnav .search-container button {
      float: none;
      display: block;
      text-align: left;
      width: 100%;
      margin: 0;
      padding: 14px;
    }
    .topnav input[type=text] {
      border: 1px solid #ccc;  
    }
  }

  .content {
    font-size: medium;
    background-color: rgb(255, 255, 255);
    height: 100%;
  }
  
  .sticky {
    position: fixed;
    top: 0;
    width: 100%;
  }
  
  .sticky + .content {
    padding-top: 40px;
  }

  .content:after {
    content: "";
    display: table;
    clear: both;
  }

  .sidecontent {
    width: 75%;
    float:right;
  }

    /* Left and right column */
    #column_left {
        width: 25%;
        float:left;
        background-color: #ffffff;
        border-right: 1px solid #7a612b;
    }
      
      /* Middle column */
    #column_right {
        width: 75%;
        border-width: thin;
        border-right: #7a612b;
      }

    ul.sidelist {
        list-style-type: none;
        margin: 0;
        padding-left: 0;
        border:0;
        width: 100%;
        position: flex;
        height: 100%;
        overflow: auto;
        text-align: left;
        font-size: 1.2rem;
        font-weight: bold;
        line-height: 1.5;

      }
      
      ul.sidelist a.active {
        background-color: #7a612b;
        color: white;
        padding-bottom: 10px;
      }


      ul a {
        display: block;
        color: #7a612b;
        text-decoration: none;
      }
      
      ul a.active {
           color: rgb(255, 0, 0);
      }
      
      ul a:hover:not(.active) {
        background-color: rgb(65, 51, 33);
        color: white;
      }

      ul a:visited {
          color:#04AA6D;
      }
      
      /*Style the Cuprins*/
      
      table.Sumar {
        width: 100%;
        border-collapse: collapse;
      }
      
      tr {
          background-color: white;
          font-size: large;
          text-align: left;   
          line-height: 1.5;
        }

      th, td {
        padding: 8px;
        border-bottom: 2px solid black;
        border-top: none;
        border-right: none;
        border-left: none;
        }

      th.title, td.title {
        padding: 8px;
        width: 80%;
        }

   
  /*Responsive layout*/
  
  /*Style the header*/
  @media screen and (max-width: 600px) {

  h1.header {
    font-size: large;
  }
  img.logo  {
    display: none;
  }

  img.logo-responsive {
    display:inline-block;
  }

  .header {
    background-image: url(Images/Background_header_resp.jpg);
  }

  /*Style the topnav and dropdown*/

  #topnav {
    display: none;
  }

  #dropdown {
    display: inline-block;
  }

  /*make one column*/

  #flex-main-item-right {
    display: none;
  }

  #flex-main-item-left {
    width: 100%;
    box-shadow:none;
    margin:0%;
  }
 /*Style central item in Issues*/

  #flex-Issues-center {
    width: 100%;
    box-shadow:none;
    margin:0%;
  }

  /*Hide address of IAIAC in footer*/

  p.footer {
    display: none;
  }

  p.footer-responsive {
    display: inline-block;
  }

  /*Style the fixed footer*/
  .footer-fixed {
    display: flex;
  }

  .footer-contact {
    display: none;
  }

  /*Style the text in homepage*/

  h4.blue {
    font-size: large;
    margin-bottom: 0%;
  }

  h5.blue {
    font-size: medium;
    margin-top: 1rem;
  }

  p.author-current {
    font-size: medium;
  }
  
  p.author-current-reviews {
    font-size: medium;
  }

  p.abstract {
    font-size: medium;
  }

  a.title-sumar {
    font-size: medium; 
    float: none;
    padding-bottom: 1rem;
  }

  a.title-main {
    font-size: medium; 
    float: left;
    padding-bottom: 1rem;
  }

  a.title-reviews {
    font-size: medium; 
  }

  a.title-annexes {
    font-size: medium;
  }

  /*Style text responsive in Issues*/

  h5.issues {
    font-size: medium;
    margin: 0%;
  }  

  p.browse-issues_main {
    display: block;
  }

  a.browse-issues_main {
    display: inline-block;
    text-decoration: underline;
  }

  a.issues {
    font-size: medium;
    font-weight: normal;
    text-decoration: underline;
  }

  /*Hide the left container in Issues*/

  #flex-Issues-left {
    display: none;
  }


  /*Hide images in Issues*/

  img.issues {
    display: none;
  }

  /*Style row in Issues to display as one column*/
  #flex-issues-row {
    display: block;
    padding: 0%;
   }

   #flex-issues-row >div {
   margin: 0%;
   text-align: left;
   width: 100%;
   align-self:baseline;
  }

    /*Hide the right container in Browse*/

    #flex-Issues-right {
      display: none;
    }

  /*Move back to top button on the left*/
  #myBtn {
    left:30px;
  }
  /*close responsive*/
  }

  /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 600px) {
    .column.left, .column.right {
      width: 100%;
    }
  }